<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>码头调度后台管理</title>
    <script src="/admin/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/admin/element-ui/element.css">
    <!-- 引入组件库 -->
    <script src="/admin/element-ui/element.js"></script>
    <!-- 引入 axios 调用 api -->
    <script src="/admin/axios.min.js"></script>
</head>

<style>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        margin: 20px;
    }
</style>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <h2>{{title}}，当前时间为：{{nowTime}}</h2>
            </el-header>
            <el-container>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>任务管理</span>
                    </div>
                    <el-form ref="taskform" :model="taskform" label-width="120px">
                        <el-form-item label="集装箱的数量">
                            <el-input v-model="taskform.containers"></el-input>
                        </el-form-item>
                        <el-form-item label="取货点">
                            <el-select v-model="taskform.start_pos" placeholder="取货点序号">
                                <el-option v-for="n in position_num" :label="n" :value="n" :key="n"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="卸货点">
                            <el-select v-model="taskform.end_pos" placeholder="取货点序号">
                                <el-option label="空" :value="null"></el-option>
                                <el-option v-for="n in position_num" :label="n" :value="n" :key="n"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="船只停靠的时间">
                            <el-input v-model=" taskform.start_time"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addTask">添加任务</el-button>
                            {{task_add_response}}
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-table :data="taskTable" style="width: 300px">
                    <el-table-column prop="id" label="任务编号" width="180">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="180">
                    </el-table-column>
                    <el-table-column prop="load" label="装货点">
                    </el-table-column>
                    <el-table-column prop="unload" label="卸货点">
                    </el-table-column>
                    <el-table-column prop="start_time" label="完成时间">
                    </el-table-column>
                </el-table>
            </el-container>

            <el-container>
                <el-table :data="aivTable" style="width: 300px">
                    <el-table-column prop="id" label="车辆编号" width="180">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="180">
                    </el-table-column>
                    <el-table-column prop="battary" label="电量">
                    </el-table-column>
                    <el-table-column prop="capacity" label="容量">
                    </el-table-column>
                    <el-table-column prop="taskid" label="分配的任务">
                    </el-table-column>
                    <el-table-column prop="position" label="点位">
                    </el-table-column>
                    <el-table-column prop="coordinate.x" label="X坐标">
                    </el-table-column>
                    <el-table-column prop="coordinate.y" label="Y坐标">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="dispatch(scope.row)" type="text" size="small">调度</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-container>
        </el-container>
    </div>
</body>

<script>
    function admin(data) {
        new Vue({
            el: '#app',
            data: () => {
                return {
                    title: "这是一个后台",
                    nowTime: "0",
                    taskform: {
                        start_pos: 24,
                        end_pos: 5,
                        containers: 1,
                        start_time: 80
                    },
                    position_num: 74,
                    task_add_response: "",
                    taskTable: [],
                    aivTable: []
                }
            },
            methods: {
                addTask() {
                    let _this = this;
                    axios.post('/task/add', this.taskform)
                        .then(function (response) {
                            _this.task_add_response = response.data;
                        })
                        .catch(function (error) {
                            _this.$message.error('error');
                            console.log(error)
                        });
                },
                dispatch(arg) {
                    let _this = this;
                    axios.post('/where/to/go', {
                        aiv: arg
                    }).then(function (response) {
                        _this.$message({
                            message: JSON.stringify(response.data),
                            type: 'success'
                        });
                    }).catch(function (error) {
                        _this.$message.error('error');
                        console.log(error)
                    });
                },
                updateScene() {
                    let _this = this
                    axios.get('/time')
                        .then(function (response) {
                            _this.nowTime = response.data;
                        })
                        .catch(function (error) {
                            clearInterval(_this.timer);
                        });

                    axios.get('/tasks')
                        .then(function (response) {
                            _this.taskTable = response.data.tasks;
                        })

                    axios.get('/aivs')
                        .then(function (response) {
                            _this.aivTable = response.data.aivs;
                        })
                }
            },
            mounted() {
                this.timer = setInterval(this.updateScene, 1000);
            }
        })
    }

    admin();
</script>

</html>